<template>
  <button :class="buttonClass" @click="handleClick">
    <slot />
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    variant: {
      type: String,
      default: 'default', // 'default', 'outline', 'destructive'
    },
    size: {
      type: String,
      default: 'default', // 'default', 'sm', 'lg', 'icon'
    },
  },
  computed: {
    buttonClass() {
      const base = 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
      const variants = {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      };
      const sizes = {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      };
      return `${base} ${variants[this.variant]} ${sizes[this.size]}`;
    },
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event);
    },
  },
};
</script>

<style scoped>
/* You might want to define primary, destructive, etc. colors in your main CSS or Tailwind config */
/* For now, using generic Tailwind classes */
.bg-primary { background-color: #3b82f6; /* blue-500 */ }
.text-primary-foreground { color: #ffffff; }
.hover\:bg-primary\/90:hover { background-color: #2563eb; /* blue-600 */ }

.bg-destructive { background-color: #ef4444; /* red-500 */ }
.text-destructive-foreground { color: #ffffff; }
.hover\:bg-destructive\/90:hover { background-color: #dc2626; /* red-600 */ }

.border-input { border-color: #e5e7eb; /* gray-200 */ }
.bg-background { background-color: #ffffff; }
.hover\:bg-accent:hover { background-color: #f3f4f6; /* gray-100 */ }
.hover\:text-accent-foreground:hover { color: #1f2937; /* gray-800 */ }
</style>
